<template>
  <div v-show="show" class="view-dialog" :class="toHide?'hide-out': ''">
    <div class="view-dialog-main" :style="'width:'+width+'px;height:'+height+'px;'">
      <div id="view-main" class="view-main">
        <div class="top-module">
          <p v-if="imgList.length>0" class="top-name">{{ imgList[curI].name !== undefined?imgList[curI].name: '' }}</p>
          <i class="el-icon-close top-close" @click="close" />
        </div>
        <div id="middle-module" class="middle-module">
          <div class="to-left" :class="curI===0?'no-move':'can-move'" @click="toLeft">
            <i class="el-icon-back" />
          </div>
          <div class="to-right" :class="curI===imgList.length-1?'no-move':'can-move'" @click="toRight">
            <i class="el-icon-back" />
          </div>
          <ul
            v-if="imgList.length>0"
            id="main-img-list"
            class="main-list"
            :style="'width:'+(width-20)*imgList.length+'px;transform:translateX(-'+curI*(width-20)+'px);transition:all '+speed+'s'"
          >
            <li
              v-for="(item,index) in imgList"
              :id="'img_index_'+index"
              :key="index"
              class="main-item"
              :style="'width:'+(width-20)+'px;'"
            >
              <!-- @mousewheel="wheelImg" -->
              <div
                v-if="videoType.includes(item.src.split('.')[item.src.split('.').length-1].toLowerCase())"
                :id="'wheel_'+index"
                class="main-item-wraper"
                @mousedown="moveImg"
              >
                <video :width="width-20" :height="height-80" controls="controls" :src="item.src">
                  您的浏览器不支持视频
                </video>
              </div>
              <!-- @mousewheel="wheelImg" -->
              <div v-else :id="'wheel_'+index" class="main-item-wraper" @mousedown="moveImg">
                <img :src="item.src">
              </div>
            </li>
          </ul>
        </div>
        <div class="operate-module">
          <!-- 顺时针旋转 -->
          <div class="clockwise" @click="toRotate(true)">
            <i class="el-icon-refresh" />
          </div>
          <div class="percent" @click="to100()">
            <span>100%</span>
          </div>
          <!-- 逆时针旋转 -->
          <div class="anti-clockwise" @click="toRotate(false)">
            <i class="el-icon-refresh" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => {
        return []
      }// 对象数组，要求传图片的名称和地址
    },
    curIndex: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 1000
    },
    height: {
      type: Number,
      default: 800
    },
    speed: {
      type: Number,
      default: 0.5
    }
  },
  data() {
    return {
      imgList: [],
      rotateTime: 0,
      scaleTime: 0, // 放大缩小的次数
      canOperate: true,
      toHide: false,
      curI: 0, // 当前的
      imgType: ['jpg', 'jpeg', 'png', 'gif'],
      videoType: ['mp3', 'mp4', 'wmv', 'avi']
    }
  },
  watch: {
    'show': function(val) {
      if (val) {
        this.toHide = false
        this.curI = this.curIndex
        this.$nextTick(() => {
          this.imgList = this.list.concat()
          setTimeout(() => {
            this.addWheel()
          }, 1000)
        })
      }
    }
  },
  activated() {
    this.imgList = this.list.concat()
  },
  mounted() {},
  methods: {
    addWheel() {
      for (let i = 0; i < this.imgList.length; i++) {
        console.log('i----', i)
        if (document.querySelector('#wheel_' + i)) document.querySelector('#wheel_' + i).addEventListener('mousewheel', this.wheelImg)
      }
    },
    close() {
      this.toHide = true
      setTimeout(() => {
        this.$emit('update:show', false)
        this.toHide = false
      }, 200)
      this.scaleTime = this.rotateTime = 0
      this.setTransform(this.curI, '')
    },
    toRight() {
      if (this.curI < this.list.length - 1) this.curI = this.curI + 1
      this.scaleTime = 0
      // setTimeout(() => { // 恢复
      //   this.setTransform(this.curI - 1, '')
      // }, 1000)
      this.setTransform(this.curI - 1, '')
    },
    toLeft() {
      if (this.curI >= 1) this.curI = this.curI - 1
      // setTimeout(() => { // 恢复
      //   this.setTransform(this.curI + 1, '')
      // }, 1000)
      this.setTransform(this.curI + 1, '')
      this.scaleTime = 0
    },
    toRotate(clockwise) {
      if (clockwise) { // 顺时针
        this.rotateTime++
      } else {
        this.rotateTime--
      }
      this.setTransform(this.curI, 'rotate(' + this.rotateTime * 90 + 'deg)')
    },
    wheelImg(e) {
      setTimeout(() => { // 防抖
        if (this.canOperate) {
          if (e.deltaY === 100) { // 缩小
            if (this.scaleTime > -4) this.scaleTime--
          } else if (e.deltaY === -100) { // 缩小
            this.scaleTime++
          }
          this.canOperate = false
          this.setTransform(this.curI, 'scale(' + (1 + this.scaleTime * 0.2) + ')')
        }
      }, 0)
      setTimeout(() => { // 防抖
        this.canOperate = true
      }, 500)
    },
    to100() {
      if (this.scaleTime !== 0) {
        this.scaleTime = 0
        this.setTransform(this.curI, '')
      }
    },
    moveImg(e) {
      console.log(e)
    },
    setTransform(i, val) {
      if (document.querySelector(`#img_index_${i} .main-item-wraper`)) {
        document.querySelector(`#img_index_${i} .main-item-wraper`).style.transform = val
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  div.hide-out{
    animation: hideAni 0.3s;
  }
  @keyframes hideAni{
    from {
      transform:translateY(0);
      opacity: 1;
    }
    to {
      transform:translateY(100px);
      opacity: 0;}
  }
  .view-dialog{
    position: fixed;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background: rgba(0,0,0,0.4);
    z-index: 999999;
    animation: showAni 0.4s;
    @keyframes showAni{
      from {
        transform:translateY(-100px);
        opacity: 0.4;
      }
      to {
        transform:translateY(0);
        opacity: 1;}
    }
    .view-dialog-main{
      position: absolute;
      top:0;
      bottom:0;
      left:0;
      right: 0;
      margin: auto;
      background: #fff;
      border-radius:4px;
      padding: 10px;
      min-width: 600px;
      min-height: 400px;
      .view-main{
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        .top-module{
          position: relative;
          flex: 0 0 30px;
          .top-name{
            height: 30px;
            line-height: 20px;
            width: calc(100% - 40px);
            font-size: 14px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            font-size: 15px;
            color: #6d6c6c;
          }
          .top-close{
            display: block;
            width:30px;
            height: 30px;
            position: absolute;
            top:0;
            right: 0;
            cursor: pointer;
            border:none;
            text-align: center;
            vertical-align: middle;
            font-size: 28px;
            color: #a5a3a3;
          }
        }
        .middle-module{
          width: 100%;
          overflow: hidden;
          flex: 1;
          position: relative;
          .to-left{
            left: 0;
          }
          .to-right{
            right: 0;
            transform:rotate(180deg);
          }
          .to-left,.to-right{
            position: absolute;
            top:0;
            bottom: 0;
            margin:auto;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            font-weight: 800;
            z-index: 9999;
            color: #9a9a9a;
            border-radius:100%;
            display:flex;
            justify-content:center;
            align-items:center;
          }
          .can-move{
            background: rgba(190,211,238,0.8);
            color: #fff;
            cursor: pointer;
          }
          .no-move{
            background: rgba(0,0,0,0.1);
            color: #fff;
            cursor: not-allowed;
          }
          ul.main-list{
            width:3999px;
            height: 100%;
          }
          li.main-item{
            float: left;
            width: 100%;
            height: 100%;
            position: relative;
            .main-item-wraper{
              transform-origin: 50% 50%;
              transition: all 0.5s;
              width: 100%;
              height: 100%;
              cursor: move;
            }
            img{
              max-width: 100%;
              max-height: 100%;
              width: auto;
              height: auto;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
              position: absolute;
            }
          }
          li.no-data{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #c7c7c7;
          }
        }
        .operate-module{
          flex: 0 0 50px;
          font-size: 35px;
          display:flex;
          justify-content:center;
          align-items:center;
          color: #9a9a9a;
          .clockwise, .anti-clockwise{
            cursor: pointer;
            color: #97bce9;
          }
          .clockwise{
            transform: rotateY(180deg) rotate(140deg);
            margin-right: 40px;
          }
          .percent{
            margin-right: 40px;
            font-size: 14px;
            width: 60px;
            height: 30px;
            border-radius: 3px;
            border: 1px solid #97bce9;
            cursor: pointer;
            text-align: center;
            line-height: 28px;
            color: #97bce9;
          }
        }
      }
    }
  }
</style>
